<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">增发记录</tn-navbar>
		<tn-sticky class="tn-white_bg">
			<tn-subsection v-model="subsectionValue" size="lg" radius="0" @change="getLeaveByStatus">
				<tn-subsection-item :title="item.text" v-for="(item,index) in statusType" :key="index" />
			</tn-subsection>
		</tn-sticky>
		<loading v-if="isLoading" style="height: 85vh;"></loading>
		<view class="empty" v-else-if="addLogs.length==0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<scroll-view scroll-y="true" v-else>
			<view class="tn-flex tn-flex-column tn-flex-center tn-p-sm">
				<view class="tn-radius card_item tn-p-sm tn-w-full" v-for="item in addLogs" :key="item.id">
					<view class="tn-flex items-center">
						<tn-title :title="item.seller_name" mode="hLine" assist-color="tn-blue" size="lg" />
						<tn-icon name="pushpin-fill" type="primary" class="tn-ml-xs" offset-top="-2rpx" />
					</view>
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
						<image :src="setImage(item.status)" mode="widthFix" class="status_img"></image>
						<text class="tn-mt-xs">
							<text>申请数量：</text>
							<text class="tn-text-sm">{{item.send_num}}</text>
						</text>
						<text class="tn-mt-xs" v-if="item.send_mark">
							<text>申请备注：</text>
							<text class="tn-text-sm">{{item.send_mark}}</text>
						</text>
						<text class="tn-mt-xs">
							<text>申请时间：</text>
							<text class="tn-text-sm">{{item.add_time}}</text>
						</text>
						<text class="tn-mt-xs" v-if="item.audit_mark">
							<text>审核备注：</text>
							<text class="tn-text-sm">{{item.audit_mark}}</text>
						</text>
						<text class="tn-mt-xs" v-if="item.audit_time">
							<text>审核时间：</text>
							<text class="tn-text-sm">{{item.audit_time}}</text>
						</text>
					</view>
					<view class="tn-pt-sm tn-mt-sm tn-border-top tn-gray-light_border">
						<view class="tn-flex items-center justify-end gap-2" v-if="subsectionValue==0">
							<tn-button type="danger" width="200" height="60" @click="reject(item.id)">驳回</tn-button>
							<tn-button type="primary" width="200" height="60"
								@click="approval('agree',item.id)">通过</tn-button>
						</view>
					</view>
				</view>
				<view class="tn-flex-center tn-mb-xs tn-w-full">
					<uni-pagination :total="total" :current="query.page" :pageSize="query.limit" @change="changePage" />
				</view>
			</view>
		</scroll-view>
	</view>
	<tn-popup v-model="showPopup" open-direction="center">
		<view class="tn-p-lg">
			<view class="popup_title">
				驳回理由
			</view>
			<tn-input type="textarea" v-model="params.reason" placeholder="请输入驳回理由" clearable :maxlength="50"
				height="220" show-word-limit></tn-input>
			<view class="tn-flex-center tn-mt">
				<tn-button size="lg" width="80vw" height="80" font-size="26"
					@click="approval('refuse')">确定提交</tn-button>
			</view>
		</view>
	</tn-popup>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		getApplyListApi,
		applyReviewApi
	} from "@/request/worktop/merchant.js"
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"

	onLoad(() => {
		getApplyList()
	})

	const modalRef = ref()
	const isLoading = ref(true)
	const showPopup = ref(false)
	const addLogs = ref([])
	const subsectionValue = ref(0)
	const total = ref(0)
	const query = ref({
		page: 1,
		limit: 10,
		seller_id: 0,
		status: '0',
	})
	const params = ref({
		id: 0,
		action: '',
		reason: ''
	})
	const statusType = [{
		text: '待审核',
		value: '0'
	}, {
		text: '已通过',
		value: '1'
	}, {
		text: '已驳回',
		value: '3'
	}]

	// 获取申请列表
	const getApplyList = () => {
		isLoading.value = true
		getApplyListApi(query.value).then(res => {
			if (res.code == 0) {
				addLogs.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 更新页码
	const changePage = (e) => {
		query.value.page = e.current
		getApplyList()
	}
	// 设置状态背景
	const setImage = (status) => {
		if (status == 0)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/40d99534-5b45-4b54-b6a2-8dcbff29a1a53d6ac6f11f07e4267ddbf5ca4b588e43.png'
		if (status == 1)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/3f606aae-bd94-47c4-9037-083f8a76140b0bfa8894d9964a401ba86b8ad0b0dcc3.png'
		if (status == 3)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/fcc77805-9cb9-459f-8e2e-35851d2fc67000e89b41ac938c456c67b816756a14cd.png'
	}
	// 切换类型
	const getLeaveByStatus = (index) => {
		query.value.status = statusType[index].value
		getApplyList()
	}
	// 驳回申请
	const reject = (id) => {
		showPopup.value = true
		params.value.reason = ''
		params.value.id = id
	}
	// 审核
	const approval = (status, id = 0) => {
		if (status !== 'agree' && params.value.reason.trim() == '') {
			uni.showToast({
				title: '请先输入驳回理由',
				icon: "none"
			})
			return
		}
		if (id) {
			params.value.id = id
		}
		params.value.action = status
		modalRef.value?.showModal({
			title: '提示',
			content: `是否${status == 'agree' ? '通过' : '驳回'}该申请吗？`,
			showCancel: true,
			confirm: () => {
				if (status == 'agree') {
					params.value.reason = '同意申请'
				}
				applyReview()
			}
		})
	}
	// 申请操作
	const applyReview = () => {
		applyReviewApi(params.value).then(res => {
			if (res.code == 0) {
				showPopup.value = false
				uni.showToast({
					title: res.message,
					success() {
						setTimeout(() => {
							getApplyList()
						}, 800)
					}
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
</script>

<style scoped lang="scss">
</style>